Flutter - Flutter 網路 GIF 圖片重複播放

參考資料

• Flutter开发实战系列-控制GIF播放
• Wayback Machine 備份--Flutter开发实战系列-控制GIF播放
• Flutter_Demo/lib/magic/gif_image.dart

說明

會寫這篇文章是因為當時正在修 行動裝置應用開發 這門課，學習過 Flutter 跟 Dart 語言，剛好教到顯示圖片的部分，然後因為 Flutter 自帶的 Image.network 雖然能顯示 GIF 圖片，但是只會播放一次，無法做到重複播放，所以在參考完這篇 Flutter开发实战系列-控制GIF播放 後，總算是能夠讓網路抓到的 GIF 圖片達成重複播放的效果，特此撰寫本篇文章作為紀錄以方便後續複查，雖然後面沒有機會再用到，但也算是個不錯的經驗。

程式部分

在 Flutter 專案的 lib 資料夾內(即 main.dart 所在的資料夾內)，建立 gif_image.dart 檔案，將Flutter_Demo/lib/magic/gif_image.dart 的程式碼貼在 gif_image.dart 檔案裡面。

然後在 main.dart 內引入：

main.dart 完整程式碼

• repetitionCount 是播放次數通常是設定為大於等於 1 的整數，-1 代表無限次數(無限循環)
• replayDuration 代表 GIF 每次循環的間隔時間(根據 repetitionCount 設定的數字，決定一次循環會播放幾次)

import 'package:flutter/material.dart';
import 'gif_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GIF Auto Reload Test'),
        ),
        body: HomeBody(),
      ),
    );
  }
}

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GIFtest(),
    );
  }
}

class GIFtest extends StatefulWidget {
  @override
  _GIFtestState createState() => _GIFtestState();
}

class _GIFtestState extends State<GIFtest> {
  String picRes1 =
      "https://i.pinimg.com/originals/96/02/e4/9602e410f5cda88aaa033d2658e2386a.gif";
  int repetitionCount = -1;
  Duration duration = Duration(seconds: 1);
  GifNetworkImage gifNetworkImage;

  @override
  void initState() {
    super.initState();
    gifNetworkImage = GifNetworkImage(
      picRes1,
      repetitionCount: repetitionCount,
      replayDuration: duration,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        GifImage.gif(image: gifNetworkImage),
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    gifNetworkImage?.dispose();
  }
}